import Vue from "vue"
import Vuex from "vuex"
//引入模块化store
import cart from "./cart"
import product from "./product"
// 引入持久化存储
import createPersistedstate from "vuex-persistedstate"

//将vuex注入给所有子组件
Vue.use(Vuex);

// 声明store
let store = new Vuex.Store({
    strict:true,//严格模式，警告开发者不要直接修改vuex
    //5个常用(核心)属性:
    //状态，组件中需要被其他组件共享使用的DATA属性
    state:{
        name:"小明",
        age:18,
        nickname:'小雷',
        num:20,
        products:[]
    },
    //相当于vuex的计算属性
    //会接收state作为参数
    getters:{
        reverseN(state){
           return  state.name.split('').reverse().join("")
        }
    },
    //修改state的方式
    //mutations是一个函数，由一个类型（key)和一个函数组成，接收state作为参数，接收payload（接收传递的数据）
    mutations:{
        INCREASE(state,payload){
            console.log(payload);
            state.num++
        },
        DECREASE(state){
            state.num--
        },
        SET_PRO(state,payload){
            state.products = payload
        }
    },
    //接收context对象，使用store.dispatch来触发action
    //context中有个方法commit,所以调用conmmit，定义mutation修改state中的products
    actions:{
        FETCH_PRO(context,payload){
            console.log(context)
            fetch('http://chst.vip/data/index.json')
            .then(body => body.json())
            .then(res =>{
                console.log(res)
                context.commit('SET_PRO',res.data)
            })
        }
    },
    //store模块化
    modules:{
        cart,
        product
    },
    //启用vuex的插件模式：plugins
    // plugins:[
    //     createPersistedstate({
    //         //存储方式
    //        storage:window.localStorage,
    //        // 存储对应的key
    //        key:'nick',
    //        //用path存储哪个字段
    //        paths:['name','product.products']

    //     })
    // ]
 
})

export default store